<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .box1
    {
        width: 100px;
        height: 100px;
        /*
        颜色单位
        在CSS中可以直接使用颜色名来设置爱各种颜色，比如red，blue，yellow，green……

        但在CSS中直接使用颜色名并不水什么情况都方便，所以需要用到RGB值
        RGB值：
        RGB通过三种颜色的不同浓度来调配出不同的颜色
        R red ,G green,B blue
        每一种颜色的范围在0-255（0%-100%）之间
        语法：RGB(红色,绿色,蓝色)
        光的三原色：如果都是满值255，则是白色，如果是0，则是黑色
        
        RGBA值
        A表示透明度，范围是0-1（0是透明，1是不透明）

        十六进制的RGB值：
        语法：#红色绿色蓝色
        颜色浓度通过00-ff
        六位可以简写成三位，但必须是描述同一个颜色的位数重复
        */
        background-color: red;
        background-color: rgb(0, 255, 0);
        background-color: rgba(255, 0,0,1);

        /*
        HSL值（HSLA值） A值也是表示透明度
        此方法在工业设计上用的多，但是在前端开发用的比较少
        H 色相0-360
        S 饱和度0%-100%
        L 亮度0%-100%
        */
    }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>